<template>
	<view>
		<view class="newsbox">
			<view class="newslist flex ac" @click="jumpdata(1)">
				<view class="newslist-image flex ac jc">
					<image src="../../static/news1.png"></image>
				</view>
				<view v-if="lista.length!==0" class="newsview flex jc fc">
					<view class="flex ac jb">
						<view class="newsview-title">系统消息</view>
						<view class="newsview-time">{{lista.create_time}}</view>
					</view>
					<view class="flex ac jb" style="margin-top: 10rpx;">
						<view class="newsview-content">{{lista.title}}</view>
						<view v-if="isReada!==0" class="newsview-num">{{isReada}}</view>
					</view>
				</view>
				<view v-else class="newsview flex jc fc">
					<view class="flex ac jb">
						<view class="newsview-title">系统消息</view>
					</view>
				</view>
			</view>
			<view class="newslist flex ac" @click="jumpdata(2)">
				<view class="newslist-image flex ac jc">
					<image src="../../static/news2.png"></image>
				</view>
				<view v-if="listb.length!==0" class="newsview flex jc fc">
					<view class="flex ac jb">
						<view class="newsview-title">官方消息</view>
						<view class="newsview-time">{{listb.create_time}}</view>
					</view>
					<view class="flex ac jb" style="margin-top: 10rpx;">
						<view class="newsview-content">{{listb.title}}</view>
						<view v-if="isReada!==0" class="newsview-num">{{isReadb}}</view>
					</view>
				</view>
				<view v-else class="newsview flex jc fc">
					<view class="flex ac jb">
						<view class="newsview-title">官方消息</view>
					</view>
				</view>
			</view>
			<view class="newslist flex ac">
				<view class="newslist-image flex ac jc">
					<image src="../../static/news4.png"></image>
				</view>
				<view class="newsview flex jc fc">
					<view class="flex ac jb">
						<view class="newsview-title">在线客服</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<view v-if="newsa=='true'" class="popupbox" @click="trigger">
			<view class="popuplist flex ac">
				<view class="newslist-image flex ac jc">
					<image src="../../static/news1.png"></image>
				</view>
				<view class="popupview flex jc fc">
					<view class="flex ac jb">
						<view class="newsview-title">系统消息</view>
						<view class="newsview-time">2024-02-22 22:22</view>
					</view>
					<view class="flex ac jb" style="margin-top: 10rpx;">
						<view class="newsview-content">抓娃娃福利红包已送达，最高50币</view>
						<view class="newsview-num">99</view>
					</view>
				</view>
			</view>
			<view style="margin: 0 20rpx;">
				<image style="width: 100%;height: 570rpx;"
					src="https://duimianimg.loovee.com/style/img/h5/jww/h51714383518035/img/mz_xx_jxxzy_2.546d936.png">
				</image>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				newsa: '',
				lista: [],
				isReada: '',
				listb: [],
				isReadb: '',
			}
		},

		onLoad() {
			if (getApp().globalData.newsvalue == '') {
				this.newsa = 'true'
			}
		},

		onShow() {
			this.readMessagedata() //请求系统消息
			this.readMessagedatb() //请求官方消息
		},

		methods: {
			//请求系统消息
			async readMessagedata() {
				let apply = await request(`${getApp().globalData.http}listMessage`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					page_num: 1,
					page_size: 1,
					cls: 1,
				})
				if (apply.data.data.length !== 0) {
					this.lista = apply.data.data[0]
					this.isReada = apply.data.count
				}
			},

			//请求官方消息
			async readMessagedatb() {
				let apply = await request(`${getApp().globalData.http}listMessage`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					page_num: 1,
					page_size: 1,
					cls: 2,
				})
				if (apply.data.data.length !== 0) {
					this.listb = apply.data.data[0]
					this.isReadb = apply.data.count
				}
			},

			jumpdata(e) {
				var index = e
				uni.navigateTo({
					url: '/pages/notice/notice?type=' + index
				})
			},

			trigger(e) {
				//保存newsvalue
				getApp().globalData.newsvalue = 'triggered' //保存newsvalue
				uni.setStorageSync('newsvalue', getApp().globalData.newsvalue)
				this.newsa = 'false'
			},

		}
	}
</script>

<style lang="scss">
	.newsbox {
		padding: 20rpx;
	}

	.newslist {
		width: 100%;
		height: 150rpx;
	}

	.newslist-image {
		width: 90rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}

	.newslist-image image {
		width: 90rpx;
		height: 90rpx;
	}

	.newsview {
		flex: 1;
		height: 150rpx;
		border-bottom: 1px solid #e9e9e9;

	}

	.newsview-title {
		font-size: 32rpx;
		color: #303030;
		font-weight: 700;
	}

	.newsview-time {
		font-size: 23rpx;
		color: #ACACAC;
		margin-right: 20rpx;
	}

	.newsview-content {
		width: 500rpx;
		font-size: 26rpx;
		color: #909090;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.newsview-num {
		padding: 0rpx 15rpx;
		border-radius: 18rpx;
		background-color: #FA4C47;
		font-size: 23rpx;
		color: #ffffff;
		margin-right: 20rpx;
	}

	// 弹窗
	.popupbox {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background-color: rgba(0, 0, 0, .7);
		padding: 30rpx 0;
	}

	.popuplist {
		padding: 0 20rpx;
		margin-top: 80rpx;
		width: 100%;
		height: 150rpx;
		background-color: #ffffff;
	}

	.popupview {
		flex: 1;
		height: 150rpx;
	}
</style>